<META HTTP-EQUIV="pragma" CONTENT="no-cache">
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<link  href="../layui/css/layui.css"  type="text/css" rel="stylesheet"/>-->
    <!--<script src="../layui/layui.js"></script>-->
    <link rel="stylesheet" href="../../../layui/css/layui.css">
    <script src="../../../layui/layui.js"></script>
    <script src="../js/jquery-2.1.1.min.js"></script>
    <link rel="stylesheet" href="../css/dashboard/bootstrap.min.css">
    <link rel="stylesheet" href="../css/dashboard/css.css">
    <link rel="stylesheet" href="../css/dashboard/demo.css">
    <link rel="stylesheet" href="../css/dashboard/ready.css">

    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=o2j36l89xTzZM6hBW25DYhrBUYGAaT8E&__ec_v__=20190126"></script>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>

</head>
<body>


<!-- 店长角色-->
<div class="layui-tab"  id="dianZhang" style="display:none">
    <ul class="layui-tab-title">
        <li class="layui-this">综合分析</li>
        <li>收支分析</li>

        <li>员工分析</li>
        <li>顾客到店</li>
    </ul>
    <div class="layui-tab-content">
        <!--综合分析 -->
            <div class="layui-tab-item layui-show">
            <div style="height: 20px;margin: 30px;" >

            <div class="row">
            <div class="col-md-3">
            <div class="card card-stats card-danger">
            <div class="card-body ">
            <div class="row">
            <div class="col-5">
            <div class="icon-big text-center">
            <!--&lt;!&ndash;<i class="la la-users"></i>&ndash;&gt;-->
            </div>
            </div>
            <div class="col-7 d-flex align-items-center">
            <div class="numbers">
            <p class="card-category">充值</p>
            <h4 class="card-title" id="recharge"></h4>
            </div>
            </div>
            </div>
            </div>
            </div>
            </div>
            <div class="col-md-3">
            <div class="card card-stats card-primary">
            <div class="card-body ">
            <div class="row">
            <div class="col-5">
            <div class="icon-big text-center">
            <!--<i class="la la-bar-chart"></i>-->
            </div>
            </div>
            <div class="col-7 d-flex align-items-center">
            <div class="numbers">
            <p class="card-category">消费</p>
            <h4 class="card-title" id="consumption"></h4>
            </div>
            </div>
            </div>
            </div>
            </div>
            </div>
            <div class="col-md-3">
            <div class="card card-stats card-info">
            <div class="card-body">
            <div class="row">
            <div class="col-5">
            <div class="icon-big text-center">
            <!--<i class="la la-newspaper-o"></i>-->
            </div>
            </div>
            <div class="col-7 d-flex align-items-center">
            <div class="numbers">
            <p class="card-category">还欠款</p>
            <h4 class="card-title" id="arrears"></h4>
            </div>
            </div>
            </div>
            </div>
            </div>
            </div>
            <div class="col-md-3">
            <div class="card card-stats card-default">
            <div class="card-body ">
            <div class="row">
            <div class="col-5">
            <div class="icon-big text-center">
            <!--<i class="la la-check-circle"></i>-->
            </div>
            </div>
            <div class="col-7 d-flex align-items-center">
            <div class="numbers">
            <p class="card-category">退款</p>
            <h4 class="card-title" id="refund"></h4>
            </div>
            </div>
            </div>
            </div>
            </div>
            </div>
            </div>





            <div class="row" style="margin: 50px 10px 10px 10px;">
            <div class="col-md-4">
            <div class="card">
            <div class="card-header">
            <h4 class="card-title">综合分析</h4>
            <p class="card-category">
            综合分析</p>
            </div>
            <div class="card-body">
            <div id="monthlyChart2" style="width: 385px;height: 500px;"></div>
            <script src="../js/dashboard/comprehensiveAnalysis.js"></script>
            </div>
            </div>
            </div>
            </div>
            </div>


        </div>
         <!-- 收支分析-->
        <div class="layui-tab-item">


            <div style="height: 20px;margin: 30px;" >

                <div class="row">
                    <div class="col-md-3">
                        <div class="card card-stats card-danger">
                            <div class="card-body ">
                                <div class="row">
                                    <div class="col-5">
                                        <div class="icon-big text-center">
                                            <!--&lt;!&ndash;<i class="la la-users"></i>&ndash;&gt;-->
                                        </div>
                                    </div>
                                    <div class="col-7 d-flex align-items-center">
                                        <div class="numbers">
                                            <p class="card-category">总收入</p>
                                            <h4 class="card-title" id="income"></h4>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card card-stats card-danger">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-5">
                                        <div class="icon-big text-center">
                                            <!--<i class="la la-newspaper-o"></i>-->
                                        </div>
                                    </div>
                                    <div class="col-7 d-flex align-items-center">
                                        <div class="numbers">
                                            <p class="card-category">总支出</p>
                                            <h4 class="card-title" id="expenditure"></h4>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-3">
                        <div class="card card-stats card-primary">
                            <div class="card-body ">
                                <div class="row">
                                    <div class="col-5">
                                        <div class="icon-big text-center">
                                            <!--<i class="la la-bar-chart"></i>-->
                                        </div>
                                    </div>
                                    <div class="col-7 d-flex align-items-center">
                                        <div class="numbers">
                                            <p class="card-category">现金</p>
                                            <h4 class="card-title" id="cashAmount"></h4>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card card-stats card-info">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-5">
                                        <div class="icon-big text-center">
                                            <!--<i class="la la-newspaper-o"></i>-->
                                        </div>
                                    </div>
                                    <div class="col-7 d-flex align-items-center">
                                        <div class="numbers">
                                            <p class="card-category">银行卡</p>
                                            <h4 class="card-title" id="bankCardAmount"></h4>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card card-stats card-default">
                            <div class="card-body ">
                                <div class="row">
                                    <div class="col-5">
                                        <div class="icon-big text-center">
                                            <!--<i class="la la-check-circle"></i>-->
                                        </div>
                                    </div>
                                    <div class="col-7 d-flex align-items-center">
                                        <div class="numbers">
                                            <p class="card-category">微信</p>
                                            <h4 class="card-title" id="weixinAmount"></h4>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card card-stats card-default">
                            <div class="card-body ">
                                <div class="row">
                                    <div class="col-5">
                                        <div class="icon-big text-center">
                                            <!--<i class="la la-check-circle"></i>-->
                                        </div>
                                    </div>
                                    <div class="col-7 d-flex align-items-center">
                                        <div class="numbers">
                                            <p class="card-category">支付宝</p>
                                            <h4 class="card-title" id="alipayAmount"></h4>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>


                <div class="row" style="margin: 50px 10px 10px 10px;">
                    <div class="col-md-4">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">收支分析</h4>
                                <p class="card-category">
                                    收支分析</p>
                            </div>
                            <div class="card-body">
                                <div id="monthlyChart3" style="width: 385px;height: 500px;"></div>
                                <script src="../js/dashboard/budgetAnalysis2.js"></script>
                            </div>
                        </div>
                    </div>
                </div>
            </div>



        </div>
        <!-- 员工分析-->
        <div class="layui-tab-item">

            <div class="row" style="margin: 50px 10px 10px 10px;">
                <div class="">
                    <div class="card">
                        <div class="">
                            <h4 class="">员工业绩前十</h4>
                            <p class="card-category">
                                员工业绩前十</p>
                        </div>
                        <div class="">
                            <div id="stuffAmount" style="width: 1600px;height: 500px;"></div>
                            <script src="../js/dashboard/stuffAmount.js"></script>
                        </div>
                    </div>
                </div>
            </div>

            <div id="pTable" style=" margin: 0 0 0 0;">
                <table id="layui_table_id" class="layui-table" lay-skin="line" lay-filter="test" >

                </table>
                <!--  <script type="text/html" id="barDemo">
                    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
                    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                  </script>-->
                <div id="laypage"></div>
            </div>



        </div>
        <!-- 顾客到店 -->
        <div class="layui-tab-item">
            <div class="row">
                <div class="col-md-3">
                    <div class="card card-stats card-danger">
                        <div class="card-body ">
                            <div class="row">
                                <div class="col-5">
                                    <div class="icon-big text-center">
                                        <!--&lt;!&ndash;<i class="la la-users"></i>&ndash;&gt;-->
                                    </div>
                                </div>
                                <div class="col-7 d-flex align-items-center">
                                    <div class="numbers">
                                        <p class="card-category">顾客数</p>
                                        <h4 class="card-title" id="memberSize2"></h4>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card card-stats card-primary">
                        <div class="card-body ">
                            <div class="row">
                                <div class="col-5">
                                    <div class="icon-big text-center">
                                        <!--<i class="la la-bar-chart"></i>-->
                                    </div>
                                </div>
                                <div class="col-7 d-flex align-items-center">
                                    <div class="numbers">
                                        <p class="card-category">新增顾客数</p>
                                        <h4 class="card-title" id="daysAgoMemberSize"></h4>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>


            </div>

        </div>
    </div>

</div>
<!-- 平台角色-->
<div style="height: 20px;margin: 30px;visibility:hidden" id="pinTai">

    <div class="row">
        <div class="col-md-3">
            <div class="card card-stats card-danger">
                <div class="card-body ">
                    <div class="row">
                        <div class="col-5">
                            <div class="icon-big text-center">
                                <!--&lt;!&ndash;<i class="la la-users"></i>&ndash;&gt;-->
                            </div>
                        </div>
                        <div class="col-7 d-flex align-items-center">
                            <div class="numbers">
                                <p class="card-category">今日新增门店数</p>
                                <h4 class="card-title" id="salonSize"></h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card card-stats card-primary">
                <div class="card-body ">
                    <div class="row">
                        <div class="col-5">
                            <div class="icon-big text-center">
                                <!--<i class="la la-bar-chart"></i>-->
                            </div>
                        </div>
                        <div class="col-7 d-flex align-items-center">
                            <div class="numbers">
                                <p class="card-category">今日新增会员数</p>
                                <h4 class="card-title" id="memberSize"></h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card card-stats card-info">
                <div class="card-body">
                    <div class="row">
                        <div class="col-5">
                            <div class="icon-big text-center">
                                <!--<i class="la la-newspaper-o"></i>-->
                            </div>
                        </div>
                        <div class="col-7 d-flex align-items-center">
                            <div class="numbers">
                                <p class="card-category">今日充值总额(旧卡充值/新购卡)</p>
                                <h4 class="card-title" id="sumAmount"></h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card card-stats card-default">
                <div class="card-body ">
                    <div class="row">
                        <div class="col-5">
                            <div class="icon-big text-center">
                                <!--<i class="la la-check-circle"></i>-->
                            </div>
                        </div>
                        <div class="col-7 d-flex align-items-center">
                            <div class="numbers">
                                <p class="card-category">今日消费总额</p>
                                <h4 class="card-title" id="sumAmount3"></h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-3">
            <div class="card card-stats card-warning">
                <div class="card-body ">
                    <div class="row">
                        <div class="col-5">
                            <div class="icon-big text-center">
                                <!--<i class="la la-users"></i>-->
                            </div>
                        </div>
                        <div class="col-7 d-flex align-items-center">
                            <div class="numbers">
                                <p class="card-category">今日积分产生</p>
                                <h4 class="card-title" id="qty2"></h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card card-stats card-success">
                <div class="card-body ">
                    <div class="row">
                        <div class="col-5">
                            <div class="icon-big text-center">
                                <!--<i class="la la-bar-chart"></i>-->
                            </div>
                        </div>
                        <div class="col-7 d-flex align-items-center">
                            <div class="numbers">
                                <p class="card-category">今日积分消耗</p>
                                <h4 class="card-title">$ 1,345</h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card card-stats card-danger">
                <div class="card-body">
                    <div class="row">
                        <div class="col-5">
                            <div class="icon-big text-center">
                                <!--<i class="la la-newspaper-o"></i>-->
                            </div>
                        </div>
                        <div class="col-7 d-flex align-items-center">
                            <div class="numbers">
                                <p class="card-category">今日代金券产生</p>
                                <h4 class="card-title" id="qty"></h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card card-stats card-primary">
                <div class="card-body ">
                    <div class="row">
                        <div class="col-5">
                            <div class="icon-big text-center">
                                <!--<i class="la la-check-circle"></i>-->
                            </div>
                        </div>
                        <div class="col-7 d-flex align-items-center">
                            <div class="numbers">
                                <p class="card-category">今日代金券消耗</p>
                                <h4 class="card-title">576</h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-9">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">门店分布图</h4>
                    <p class="card-category">
                        各美容院门店在省内的分布情况</p>
                </div>
                <div id="mapChart" style="width: 98%;height: 500px;"></div>
                <script src="../js/dashboard/map.js"></script>
                <div class="card-body">
                    <div class="mapcontainer">
                        <div class="map">
                            <span>数据来源于合一</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">来源统计</h4>
                    <p class="card-category">
                        本月用户统计</p>
                </div>
                <div class="card-body">
                    <div id="monthlyChart" style="width: 98%;height: 500px;"></div>
                    <script src="../js/dashboard/monthlyChart.js"></script>
                </div>
            </div>
        </div>
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">热销产品</h4>
                    <p class="card-category">
                        热销产品分析</p>
                </div>
                <div class="card-body">
                    <div id="salesChart" style="width: 98%;height: 500px;"></div>
                    <script src="../js/dashboard/salesChart.js"></script>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
<script type="text/javascript">

    //注意：选项卡 依赖 element 模块，否则无法进行功能性操作
    layui.use('element', function(){
        var element = layui.element;

        //…
    });

    $.ajax({
        url:"/hy/basic/statistics/total",
        type:"get",
        async:false,
        dataType:"json",
        success:function(dataJson){

            console.log("+++"+JSON.stringify(dataJson));
            if(dataJson.data.jobLevel==-1){
                $("#pinTai").css("visibility","visible")
                $("#salonSize").text(dataJson.data.salonSize);

                $("#memberSize").text(dataJson.data.memberSize);

                $("#sumAmount").text("¥"+dataJson.data.sumAmount+"/¥"+dataJson.data.sumAmount2);

                $("#sumAmount3").text("¥"+dataJson.data.sumAmount3);

                $("#qty").text(dataJson.data.qty);

                $("#qty2").text(dataJson.data.qty2);
            }else{
                $("#dianZhang").css("display","block")

                //综合分析
                $("#recharge").text("¥"+dataJson.data.sumAmount+"/¥"+dataJson.data.sumAmount2);

                $("#consumption").text("¥"+dataJson.data.sumAmount3);

                $("#arrears").text("¥"+dataJson.data.ArreagesAmount);

                $("#refund").text("¥"+dataJson.data.rejectAmount);
                //收支分析



                $("#expenditure").text("¥"+dataJson.data.refundAmount);

                $("#income").text("¥"+dataJson.data.sumAmount3);

                $("#cashAmount").text("¥"+dataJson.data.cashAmount);

                $("#bankCardAmount").text("¥"+dataJson.data.bankCardAmount);

                $("#weixinAmount").text("¥"+dataJson.data.weixinAmount);

                $("#alipayAmount").text("¥"+dataJson.data.alipayAmount);

                //顾客到店

                $("#memberSize2").text("¥"+dataJson.data.memberSize);

                $("#daysAgoMemberSize").text("¥"+dataJson.data.daysAgoMemberSize);



            }









        },
        error:function(){
            alert("返回异常")
        }
    });



    layui.use(['form','laydate','layer','table','laypage','util'],function(){
        var form = layui.form;
        var laydate=layui.laydate;
        var $ = layui.$;
        productsearch(1);

        function productsearch(page,filterExpr) {

            var table = layui.table,
                laydate = layui.laydate,
                laypage = layui.laypage;
            var form = layui.form;
            table.render({
                elem : '#layui_table_id',
                url : '/hy/basic/statistics/queryStuffAnalysis',
                cols : [ [

                    {
                        field : 'stuffName',
                        title : '员工',
                        align : 'center'
                    }
                    ,
                    {
                        field : '',
                        title : '业绩',
                        align : 'center'
                    }
                    , {
                        field : 'paymentAmount',
                        title : '卡耗',
                        align : 'center'
                    }
                    , {
                        field : 'consumptionAmount',
                        title : '消费',
                        align : 'center'
                    }
                    , {
                        field : 'rechargeAmount',
                        title : '充值',
                        align : 'center'
                    }


                ] ],
                page : false,
                where : {
                    filterExpr:filterExpr,
                },
                responseHandler: function (res, curr,count) {
                    $('#pageNum').val(curr);
                    return {
                        "count": res.total,
                        "data": res.data.stuffAmountList,
                        "code": 0,//code值为200表示成功
                        "msg": ""
                    }
                },
                done : function(res, curr, count) {
                    console.log(res)
                    $('#pageNum').val(curr);

                }
            })
            // table.on('checkbox(test)', function(obj){
            //   console.log(layui.table.checkStatus('layui_table_id'));
            // });
            // 监听工具条
            table.on('tool(test)', function(obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
                var data = obj.data, //获得当前行数据
                    layEvent = obj.event; //获得 lay-event 对应的值
                if (layEvent == 'detail') {
                    queryById(data.id);
                } else if (layEvent == 'del') {
                    //alert(data.id)
                    var pageNum = $('#pageNum').val();
                    layer.confirm('真的删除行么', function(index){
                        deleteById(data.id);
                        layer.close(index);
                        //向服务端发送删除指令
                    });
                } else if (layEvent === 'edit') {
                    layer.msg('编辑操作');
                }
            });
            //常规用法
            laydate.render({
                elem : '#createDate'
            });
            //常规用法
            laydate.render({
                elem : '#processingTime'
            });

        }





    });



</script>
</html>



